<template>
  <div class="p-6">
    <a-row :gutter="16">
      <a-col :span="6">
        <a-card hoverable>
          <template #title>
            <div class="flex items-center">
              <DollarOutlined class="text-blue-500 text-xl mr-2" />
              <span>今日交易额</span>
            </div>
          </template>
          <div class="text-2xl font-bold">¥ 12,345.67</div>
          <div class="text-sm text-gray-500 mt-2">
            较昨日 <span class="text-green-500">+12.5%</span>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card hoverable>
          <template #title>
            <div class="flex items-center">
              <CheckCircleOutlined class="text-green-500 text-xl mr-2" />
              <span>成功交易数</span>
            </div>
          </template>
          <div class="text-2xl font-bold">1,234</div>
          <div class="text-sm text-gray-500 mt-2">
            较昨日 <span class="text-green-500">+8.3%</span>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card hoverable>
          <template #title>
            <div class="flex items-center">
              <ClockCircleOutlined class="text-orange-500 text-xl mr-2" />
              <span>待处理订单</span>
            </div>
          </template>
          <div class="text-2xl font-bold">56</div>
          <div class="text-sm text-gray-500 mt-2">
            较昨日 <span class="text-red-500">+5.2%</span>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card hoverable>
          <template #title>
            <div class="flex items-center">
              <UserOutlined class="text-purple-500 text-xl mr-2" />
              <span>活跃用户</span>
            </div>
          </template>
          <div class="text-2xl font-bold">892</div>
          <div class="text-sm text-gray-500 mt-2">
            较昨日 <span class="text-green-500">+15.7%</span>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="16" class="mt-6">
      <a-col :span="16">
        <a-card title="交易趋势" :bordered="false">
          <div class="h-80">
            <!-- 这里将集成图表库 -->
            <div class="h-full flex items-center justify-center text-gray-400">
              图表区域
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card title="支付方式分布" :bordered="false">
          <div class="h-80">
            <!-- 这里将集成图表库 -->
            <div class="h-full flex items-center justify-center text-gray-400">
              图表区域
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <a-card title="最近交易" :bordered="false" class="mt-6">
      <a-table :columns="columns" :data-source="data" :pagination="false">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <a-tag :color="getStatusColor(record.status)">
              {{ record.status }}
            </a-tag>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  DollarOutlined,
  CheckCircleOutlined,
  ClockCircleOutlined,
  UserOutlined
} from '@ant-design/icons-vue'

const columns = [
  {
    title: '订单号',
    dataIndex: 'orderNo',
    key: 'orderNo'
  },
  {
    title: '金额',
    dataIndex: 'amount',
    key: 'amount'
  },
  {
    title: '支付方式',
    dataIndex: 'paymentMethod',
    key: 'paymentMethod'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime'
  }
]

const data = [
  {
    key: '1',
    orderNo: 'AP202403150001',
    amount: '¥ 1,234.56',
    paymentMethod: '支付宝',
    status: '成功',
    createTime: '2024-03-15 10:00:00'
  },
  {
    key: '2',
    orderNo: 'AP202403150002',
    amount: '¥ 2,345.67',
    paymentMethod: '微信支付',
    status: '处理中',
    createTime: '2024-03-15 10:30:00'
  },
  {
    key: '3',
    orderNo: 'AP202403150003',
    amount: '¥ 3,456.78',
    paymentMethod: '银联',
    status: '失败',
    createTime: '2024-03-15 11:00:00'
  }
]

const getStatusColor = (status: string) => {
  const colors: Record<string, string> = {
    '成功': 'success',
    '处理中': 'processing',
    '失败': 'error'
  }
  return colors[status] || 'default'
}
</script>